<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/fenlei.css" />
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_603026_2npj5yaujta10pb9.css" />

	</head>

	<body>
		<!--头部-->
		<div class="header">
			<div class="back">
				<a href="index.html">Back</a>
			</div>
			<p>分类</p>
			<div class="slCity fr">
				<select name="city">
					<option value=广州"广州">广州</option>
					<option value="深圳">深圳</option>
				</select>
			</div>

			<div class="swiper-container kv">

				<!--图片区域-->
				<ul class="swiper-wrapper">
					<li class="swiper-slide">
						<a href=""><img src="img/fenlei/food.png" alt="" /></a>
					</li>
					<li class="swiper-slide">
						<a href=""><img src="img/fenlei/movie.png" alt="" /></a>
					</li>
					<li class="swiper-slide">
						<a href=""><img src="img/fenlei/sport.png" alt="" /></a>
					</li>
					<li class="swiper-slide">
						<a href=""><img src="img/fenlei/sing.png" alt="" /></a>
					</li>
				</ul>
				<!--分页器-->
				<div class="swiper-pagination"></div>

			</div>
		</div>

		<!--主题内容-->
		<div class="section">
			<div class="meishilei">
				<p class="p1">
					<img src="img/fenlei/meishilei.png" />
					<span>美食类</span>
				</p>
				<p class="p2">
					<span>更多</span>
					<img src="img/fenlei/r.png" />
				</p>
			</div>
			<div class="tupian1">
				<div class="tu1"><img src="img/fenlei/1.png" /></div>
				<div class="tu2"><img src="img/fenlei/2.png" /></div>
				<div class="tu3"><img src="img/fenlei/3.png" /></div>
				<div class="tu4"><img src="img/fenlei/4.png" /></div>
			</div>
			<div class="yundonglei">
				<p class="p1">
					<img src="img/fenlei/yun.png" />
					<span>运动类</span>
				</p>
				<p class="p2">
					<span>更多</span>
					<img src="img/fenlei/r.png" />
				</p>
			</div>
			<div class="tupian2">
				<div class="tu1"><img src="img/fenlei/y1.png" /></div>
				<div class="tu2"><img src="img/fenlei/y2.png" /></div>
				<div class="tu3"><img src="img/fenlei/y3.png" /></div>
				<div class="tu4"><img src="img/fenlei/y4.png" /></div>
			</div>
			<div class="dianying">
				<p class="p1">
					<img src="img/fenlei/movie.png" />
					<span>电影类</span>
				</p>
				<p class="p2">
					<span>更多</span>
					<img src="img/fenlei/r.png" />
				</p>
			</div>
			<div class="tupian3">
				<div class="tu1"><img src="img/fenlei/d1.png" /></div>
				<div class="tu2"><img src="img/fenlei/d2.png" /></div>
				<div class="tu3"><img src="img/fenlei/3.png" /></div>
				<div class="tu4"><img src="img/fenlei/4.png" /></div>
			</div>

		</div>

		<!--底部-->
		<div class="footer">
			<ul class="nav fl">
				<li>
					<a href="index.html"><i class="iconfont icon-homepageselected"></i></a>
					<a href="index.html">首页</a>
				</li>

				<li><a href="fenlei.html"><i class="iconfont icon-icon--"></i></a>
					<a href="fenlei.html">分类</a>
				</li>

				<li><a href="find.html"><i class="iconfont icon-faxian"></i></a>
					<a href="find.html">发现</a>
				</li>

				<li><a href="my.html"><i class="iconfont icon-wode"></i></a>
					<a href="my.html">我的</a>
				</li>

			</ul>
		</div>

		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var swiper = new Swiper('.swiper-container', {
				slidesPerView: 4,
				/*显示几个内容*/
				spaceBetween: 33,
				/*内容之间的间距*/
				loop: true,
				/*轮播*/
				autoplay: true,
				/*自动轮播*/
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
			});
		</script>
	</body>

</html>